<div class="advanced-search">
  <span class="prefix-icon" [matTooltip]="errorMessages?.[0]?.message">
    @if (!queryInputValue) {
      <ix-icon name="mdi-text-search-variant"></ix-icon>
    } @else if (hasQueryErrors) {
      <ix-icon name="warning"></ix-icon>
    } @else {
      <ix-icon name="done"></ix-icon>
    }
  </span>

  <div #inputArea class="input-area" (focusin)="startSuggestionsCompletion()" (click)="startSuggestionsCompletion()">
    @if (showDatePicker$ | async) {
      <mat-card class="calendar">
        <mat-calendar (selectedChange)="dateSelected($event)"></mat-calendar>
      </mat-card>
    }
  </div>

  <a
    class="switch-link"
    ixTest="switch-to-advanced"
    tabindex="0"
    (click)="switchToBasic.emit()"
    (keydown.enter)="switchToBasic.emit()"
  >
    {{ 'Switch To Basic' | translate }}
  </a>

  <span
    class="reset-icon reset-input"
    [class.hidden]="!editorHasValue"
    (click)="onResetInput()"
  >
    <ix-icon
      name="mdi-close-circle"
      tabindex="0"
      (keydown.enter)="$event.preventDefault(); onResetInput()"
    ></ix-icon>
  </span>
</div>

@if (filterPresets()?.length > 0) {
  <ix-filter-presets
    [presets]="filterPresets()"
    [selectedPresetLabels]="selectedPresetLabels()"
    (filtersChanged)="applyPreset($event.filters, $event.selectedLabels)"
  ></ix-filter-presets>
}
